<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script >
        <script src='jquery文件的路径'></script>



    jquery的注释

    单行注释 //

    多行注释 /* 注释的内容 */

    选择器 $('标签') $ === jquery

    class选择器 $('.box') <div class='box'></div> jquery('.box')

    id 选择器 $('#box') <div id='box'></div>

    元素选择器 $('标签名')

    属性选择器： []

    伪类选择器 :

    id 选择器

    <div id="notMe">
        <p>id="notMe"</p>
    </div>

    <div id="myDiv">id="myDiv"</div>

    $("#myDiv");

    class选择器

    <div class="notMe">div class="notMe"</div>

    <div class="myClass">div class="myClass"</div>

    <span class="myClass">span class="myClass"</span>

    $(".myClass");





    元素选择器

    <div>DIV1</div>

    <div>DIV2</div>

    <span>SPAN</span>

    $("div");

    属性选择器
    <div>
        <p>Hello!</p>
    </div>
    <div id="test2"></div>

    $("div[id]") 获取div标签中有id属性的

    <input type="checkbox" name="newsletter" title='aa' value="Hot Fuzz" />

    <input type="checkbox" name="newsletter" value="Cold Fusion" />

    <input type="checkbox" name="newscate" value="Cold Fusion" />

    <input type="checkbox" name="accept" value="Evil Plans" />

    $('input[title]'); 获取有title属性的input框

    $('input[name]'); 获取有name属性的input框

    $('input[name="accept"]'); 获取name="accept"的input框 等于

    $('input[name!="accept"]'); 获取name!="accept"的input框 不等于

    $('input[name^="news"]'); 获取有name属性的并且值以news开头的input框 ^开头

    $('input[name$="t"]') 获取有name属性的并且值以t结尾的input框 $结尾

    $('input[name*="tt"]') 获取有name属性的并且值包含tt的input框 *包含 存在

    伪类选择器：

    <ul>

        <li>list item 1</li>

        <li>list item 2</li>

        <li>list item 3</li>

        <li>list item 4</li>

        <li>list item 5</li>

    </ul>



    $('li:first') === $('li').first(); 获取第一个li

    $('li:last') === $('li').last(); 获取最后一个li

    $('li:eq(n)') === $('li').eq(n); 获取第n个li n从0开始 n就是位置数



    $('li:eq(0)') 获取第一个li

    $('li:eq(1)') 获取第二个li

    $('li:eq(2)') 获取第三个li



    $('li:gt(1)') === $('li').gt(1) 获取位置数大于1的li标签

    $('li:lt(2)') === $('li').lt(2) 获取位置数小于2的li标签

    注意： 在jquery中会使用.链接 标签和函数 的

    伪类选择器是: 链接的 .链接的都是函数 必须加()



    <form>

        <input type="text" name="email" />

        <input type="hidden" name="id" /> type="hidden" 隐藏域

    </form>

    $("input:hidden") 获取隐藏域的input框

    <form>

        <input type="checkbox" name="newsletter" checked="checked" value="Daily" />

        <input type="checkbox" name="newsletter" value="Weekly" />

        <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

    </form>



    $("input:checked") 获取选择的复选框





    <select>

        <option value="1">Flowers</option>

        <option value="2" selected="selected">Gardens</option>

        <option value="3">Trees</option>

    </select>

    $("select option:selected") 获取选中的下拉选择







    筛选：

    <p>

        <span>Hello</span>, how are you?

    </p>

    $('p span'); 获取p标签里面的span标签

    $('p').find('span'); 获取p标签 然后在p标签里面去查找span标签





    <p>Hello</p>

    < a href=' '>Hello Again</ a>

    <div><span>And Again</span></div>

    $("p").next(); 查找p标签的后面一个标签

    $("p").nextAll(); 查找p标签的后面所有的标签

    $('a').prev(); 查找a标签的前面一个标签

    $('div').prevAll(); 查找div标签前面的所有标签



    属性；

    标签.attr();

    <input type="checkbox" name="newsletter" checked="checked" value="Daily" />

    $('input').attr('name'); 获取input框的name属性值

    $('img').attr('alt','aaa'); 将input框的alt属性改为aaa

    $('img').attr({'alt':'aaa','title':'哈哈'}); 同时改变一个标签的多个属性

    attr() 可以改变/获取任何属性的值 但是除了value属性

    标签.removeAttr('属性名'); 移除标签的属性

    < img src="test.jpg" />

    $('img').removeAttr('src'); 删除img的src属性

    < img />



    标签.val(); 获取value属性的值 或者改变value属性的值

    $("input").val(); 获取input框的value属性的值 ()为空 代表获取值

    $("input").val("hello world!"); 改变input框value属性的值 ()不为空 代表赋值

    标签.text(); 获取标签中的文本 或者改变标签中的文本

    <p>呵呵呵呵</p>

    $('p').text(); 获取p标签中的文本 //呵呵呵呵 ()为空 代表获取文本

    $('p').text('哈哈哈'); 改变p标签中的文本 //<p>哈哈哈</p> ()不为空 代表赋值

    标签.html(); 获取标签中的html代码 或者改变标签中的html代码

    <p><span>斤斤计较</span></p>

    $('p').text(); 获取p标签中的文本 //斤斤计较

    $('p').html(); 获取p标签中的html代码 //<span>斤斤计较</span> ()为空 代表获取html代码

    $('p').html('<b>点点滴滴</b>'); 改变p标签中的html代码 //<p><b>点点滴滴</b></p> ()不为空 代表赋值



    .on{ background:red;}

    <ul>

        <li>Hello</li>

        <li>Hello</li>

        <li>Hello</li>

    </ul>

    $('ul li:first').addClass('on'); <li class='on'>Hello</li>

    $('ul li:first').removeClass('on'); <li>Hello</li>



    css ： 标签.css(); 改变/获取标签的值

    <p>发给复古风格</p>

    $('p').css('color'); //获取p标签中文字的颜色

    $('p').css('color','red'); 将p标签的文字颜色改变为红色

    $('p').css('background','yellow');

    $('p').css('width','200px');

    $('p').css('height','300px');

    $('p').css({'color':'red','background':'yellow','width':'200px','height':'300px'});

    事件： 标签.事件(function(){ }); 对标签执行事件的时候 就会运行事件中的函数

    $('input').click(function(){

    alert('ghj');

    });
    </script>
</body>

</html>


1、介绍自己留五分钟
2、进入正题，工作经历，擅长啥
3、